<template>
  <div class="dashboard-container">
    <el-container>
      <el-header class="dashboard-header">
        <div class="header-content">
          <div class="logo-title">
            <img src="@/assets/logo.png" alt="Logo" class="header-logo">
            <span>简历分析系统 - 管理员面板</span>
          </div>
          <el-button @click="logout" type="text">退出登录</el-button>
        </div>
      </el-header>
      <el-main>
        <el-tabs v-model="activeTab">
          <el-tab-pane label="用户管理" name="users">
            <el-table :data="users" style="width: 100%" class="admin-table">
              <el-table-column prop="username" label="用户名" />
              <el-table-column prop="lastLogin" label="最后登录时间" />
              <el-table-column prop="analysisCount" label="分析次数" />
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button size="small" @click="editUser(scope.row)">编辑</el-button>
                  <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-pagination
              class="pagination"
              :page-size="pageSize"
              :total="totalUsers"
              @current-change="handlePageChange"
            />
          </el-tab-pane>
          <el-tab-pane label="系统设置" name="settings">
            <el-form :model="settings" label-width="120px" class="settings-form">
              <el-form-item label="最大文件大小(MB)">
                <el-input-number v-model="settings.maxFileSize" :min="1" :max="20" />
              </el-form-item>
              <el-form-item label="允许的文件类型">
                <el-checkbox-group v-model="settings.allowedTypes">
                  <el-checkbox label="pdf">PDF</el-checkbox>
                  <el-checkbox label="docx">DOCX</el-checkbox>
                  <el-checkbox label="txt">TXT</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveSettings">保存设置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const activeTab = ref('users')
const pageSize = ref(10)
const totalUsers = ref(50)
const users = ref([
  { username: 'user1', lastLogin: '2023-05-01 10:30', analysisCount: 5 },
  { username: 'user2', lastLogin: '2023-05-02 14:20', analysisCount: 3 },
  { username: 'user3', lastLogin: '2023-05-03 09:15', analysisCount: 7 }
])
const settings = ref({
  maxFileSize: 10,
  allowedTypes: ['pdf', 'docx', 'txt']
})

const logout = () => {
  userStore.logout()
}

const editUser = (user) => {
  console.log('编辑用户:', user)
}

const deleteUser = (user) => {
  console.log('删除用户:', user)
}

const handlePageChange = (page) => {
  console.log('切换页码:', page)
}

const saveSettings = () => {
  console.log('保存设置:', settings.value)
}
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: #f5f7fa;
  padding: 20px;
}
.dashboard-header {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-bottom: 1px solid #ebeef5;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}
.logo-title {
  display: flex;
  align-items: center;
  gap: 15px;
}
.header-logo {
  height: 50px;
}
.admin-table {
  margin-bottom: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.pagination {
  margin: 30px auto;
  justify-content: center;
  width: 100%;
  max-width: 800px;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.settings-form {
  padding: 25px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}
</style>
